<template>
  <div class="index">
    <div>
      <van-nav-bar title="练习" left-text="返回" left-arrow @click-left="onClickLeft" border />
    </div>
    <!-- 练习题目 -->
    <examination :single="single" :selection="selection" :judge="judge" :operation="operation" :disabled="disfalgs" ref="mychild"></examination>
    <!-- 选题 -->
    <div>
      <van-button type="primary" @click="upItem" class="upItem">上一题</van-button>
      <div>
        <van-button type="primary" @click="showPopup" class="xuanti"> 查看答案</van-button>
        <van-popup v-model="show" position="bottom">
          <div class="showfalg">
            <div style="padding: 15px">参考答案:</div>
            <div style="padding: 15px">{{ showflag }}</div>
          </div>
        </van-popup>
      </div>
      <van-button type="primary" @click="nexItem" class="nexItem">下一题</van-button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { NavBar } from 'vant'
import { Checkbox, CheckboxGroup } from 'vant'
import { Button } from 'vant'
import { Toast } from 'vant'
import { Popup } from 'vant'
import examination from '../components/examination'

export default {
  components: { examination },
  comments: {
    examination
  },
  name: 'practice',
  data() {
    return {
      disfalgs: false,
      // 当前题目参考答案
      showflag: '',
      show: false,
      // 题目下标
      i: 0,
      // 不同题型
      falg1: '',
      falg2: '',
      falg3: '',
      // 保存题目数据
      single: [{}],
      selection: [{}],
      judge: [{}],
      operation: '',
      // 保存选择数据
      single_key: [],
      selection_key: [],
      judge_key: [],

      // 参考答案
      single_right_key: [],
      selection_right_key: [],
      judge_right_key: []
    }
  },
  methods: {
    // 练习返回
    onClickLeft() {
      this.$router.push('index')
    },
    // 获取考试答案内容
    onexamda() {
      let arr = this.$refs['mychild'].onexamda()
      this.single_key = arr[0]
      this.selection_key = arr[1]
      this.judge_key = arr[2]
      this.operation_key = arr[3]
    },
    // 所在题目类型
    onleixing() {
      let arr = this.$refs['mychild'].onleixing()
      this.falg1 = arr[0]
      this.falg2 = arr[1]
      this.falg3 = arr[2]
      this.i = arr[3]
    },
    // 上一题
    upItem() {
      this.$refs.mychild.upItem()
    },
    // 下一题
    nexItem() {
      this.$refs.mychild.nexItem()
    },
    // 查看参考答案
    showPopup() {
      this.onleixing()
      this.onexamda()
      if (this.falg1) {
        if (this.single_key[this.i] == null) {
          Toast('请先选择答案')
        } else {
          this.showflag = this.single_right_key[this.i]
          this.show = true
        }
      }
      if (this.falg2) {
        if (this.selection_key[this.i] == null || this.selection_key[this.i].length == 0) {
          Toast('请先选择答案')
        } else {
          this.showflag = this.selection_right_key[this.i]
          this.show = true
          console.log(this.selection_key[this.i])
        }
      }
      if (this.falg3) {
        if (this.judge_key[this.i] == null) {
          Toast('请先选择答案')
        } else {
          this.showflag = this.judge_right_key[this.i] == '0' ? '对' : '错'
          this.show = true
        }
      }
    }
  },
  mounted() {
    // 获取科目
    axios({
      method: 'post',
      url: this.baseURL + '/api/api/practice',
      data: {
        subject: localStorage.getItem('subject_name')
      }
    }).then((res) => {
      // console.log(res)
      // 获取题目信息
      this.single = res.data.single
      this.selection = res.data.selection
      this.judge = res.data.judge
      // 获取参考答案
      for (let i = 0; i < this.single.length; i++) {
        this.single_right_key[i] = this.single[i]['right_key']
      }
      for (let i = 0; i < this.selection.length; i++) {
        this.selection_right_key[i] = this.selection[i]['right_key']
      }
      for (let i = 0; i < this.judge.length; i++) {
        this.judge_right_key[i] = this.judge[i]['right_key']
      }
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.upItem {
  position: fixed;
  left: 3%;
  bottom: 3%;
}
.nexItem {
  position: fixed;
  right: 3%;
  bottom: 3%;
}
.xuanti {
  position: fixed;
  right: 40%;
  bottom: 3%;
}
.showfalg {
  display: flex;
  justify-content: space-around;
  justify-items: center;
  font-size: 16px;
}
</style>
